<template>
    <div class="container">
        <el-page-header @back="goBack" content="小哥车辆管理"></el-page-header>
        <div class="e-m-t-45" v-if="cardata">
            <el-descriptions class="margin-top" title="" :column="3" border>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-user"></i>
                        车辆类型
                    </template>
                    {{ cardata.type.name }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-user"></i>
                        车牌号
                    </template>
                    {{ cardata.licenseplate }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-user"></i>
                        载重量
                    </template>
                    {{ cardata.load }}KG
                </el-descriptions-item>
            </el-descriptions>
        </div>
        <div class="e-m-t-45">
            <el-form :inline="true" :model="formInline" label-width="200px" class="demo-form-inline">
                <el-form-item label="行驶证正面">
                    <el-image style="width: 300px; height: 300px" :src="fileURL + cardata.drivinglicensefront"
                        fit="fit"></el-image>
                </el-form-item>
                <el-form-item label="行驶证反面">
                    <el-image style="width: 300px; height: 300px" :src="fileURL + cardata.drivinglicenseback"
                        fit="fit"></el-image>
                </el-form-item>
                <el-form-item label="车辆照片">
                    <el-image style="width: 300px; height: 300px" :src="fileURL + cardata.vehiclepic" fit="fit"></el-image>
                </el-form-item>
            </el-form>
        </div>
        <div v-if="cardata.vehiclestate == '空闲'" class="e-m-t-45 flex" style="align-items: baseline; justify-content: flex-start;">
            车辆状态
            <el-tag class="e-m-l-15" v-if="cardata.vehiclestate == '空闲'">{{ cardata.vehiclestate }}</el-tag>
            <!-- <div class="e-m-t-15 e-m-l-15" v-if="cardata.starttime"> <el-tag  type="">使用时间：{{ cardata.starttime }}</el-tag> </div> -->
        </div>


        <div v-if="cardata.vehiclestate !== '空闲'" class="e-m-t-45 flex"
            style="align-items: baseline; justify-content: flex-start;">
            车辆状态
            <el-tag class="e-m-l-15" type="danger">{{ cardata.vehiclestate }}</el-tag>
            <div class="e-m-t-15 e-m-l-15" v-if="cardata.starttime"> <el-tag type="danger">使用时间：{{ cardata.starttime }}</el-tag> </div>
        </div>
        <div class="e-m-t-45">
            <el-row type="flex" justify="space-between" class="nav-bar">
                <el-col :span="3">
                    出车记录
                </el-col>
                <el-col class="text-right">
                    <el-form :inline="true" label-width="auto" class="nav-bar-form">
                        <el-form-item label="">
                            <!-- <el-button type="primary" @click="downloadwithdrawa" plain><i
                                    class="iconfont icon-excel"></i>导出Excel</el-button> -->
                        </el-form-item>
                        <el-form-item label="出车时间">
                            <el-date-picker @change="time" :clearable="false" value-format="yyyy-MM-dd" v-model="value1"
                                type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" @click="getdata(id)">查询</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <!-- <div>
                <el-table :data="cardata.vehiclehistory.rows" style="width: 100%">
                    <el-table-column fixed type="index" label="序号" width="50">
                </el-table-column>
                    <el-table-column prop="starttime" label="开始时间">
                    </el-table-column>
                    <el-table-column prop="endtime" label="结束时间">
                    </el-table-column>
                    <el-table-column prop="number" label="关联订单">
                    </el-table-column>
                    <el-table-column prop="name" label="使用小哥">
                    </el-table-column>
                </el-table>
            </div>
            <div class="table-pagination">
                <el-pagination background layout="sizes, total, prev, pager, next" :total="total"
                    :page-sizes="[10, 50, 100, 200]" :page-size="pageSize" :current-page="page" @current-change="pageChange"
                    @size-change="handleSizeChange">
                </el-pagination>
            </div> -->
        </div>
    </div>
</template>

<script>
export default {
    components: {},
    layout: 'admin',
    head() {
        return {
            title: '小哥车辆详情' 
        }
    },
    props: {},
    data() {
        return {
            page: 1,
			pageSize: 10,
			total: 0,
            value1: '',
            starttime: "",
            endtime: "",
            cardata: {
                type:{
                    name:''
                },
                vehiclehistory:{
                    rows:''
                }
            },
            id: '',
            startdate: "",//下单初始
            enddate: "",//下单结束
            formInline: {
                user: '',
                region: ''
            }
        };
    },
    watch: {},
    computed: {},
    methods: {
        pageChange(e) { // 页码切换事件
			this.page = e;
			this.getdata(this.$route.query.id)
		},
		handleSizeChange(val) {
			this.page = 1;
			this.pageSize = val;
			this.getdata(this.$route.query.id)
		},
        downloadwithdrawa() {
            this.$axios.post(`/Operator/Vehicle/DetailsDownload`,{
                "id":this.$route.query.id,
                "startTime":this.starttime,
                "endTime":this.endtime,
            },{
                responseType: 'blob'
            }).then((res) => {
                // console.log(res)
                // this.cardata = res
                let content = res;
                let fileName = '车辆详情.xls'
                this.utils.saveAndExport(content, fileName)
            })
        },
        getdata(id) {
            this.$axios.get(`/Operator/Vehicle/Details?id=`+id).then((res) => {
                this.cardata = res
                console.log(res,'sssssdd')
            //    this.total =  this.cardata.vehiclehistory.total
            })
        },
        goBack() {
            this.$router.go(-1)
        },
        time(e) {
            console.log(e)
            this.starttime = e[0]
            this.endtime = e[1]
            // this.timeType = 4

        },
    },
    created() {
        // this.id = this.$route.query.id;
        // this.getdata(this.$route.query.id)
        // console.log(this.$route.query.id,'sss')
    },
    mounted() {
        this.id = this.$route.query.id;
        this.getdata(this.$route.query.id)
        // console.log(this.$route.query.id,'sss')
    }
};
</script>
<style lang="scss" scoped></style>